<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../static/lib/bootstrap.min.css">
    <script src="../../static/lib/jquery-1.7.2.js"></script>
    <script src="../../static/lib/bootstrap.js"></script>

    <script src="../../static/lib/vue.js"></script>
    <script>
        $(function () {
            $('#head').load('../head.html');
            var vm = new Vue({
                el : '#subject',
                data : {
                    list : [],
                    list1 : [],
                    answer:[]
                },
                created: function () {
                    $.ajax({
                        //几个参数需要注意一下
                        type: "GET",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/page/user/getQuestion?project=java" ,//url
                        success: function (result) {
                            console.log(result.data);//打印服务端返回的数据(调试用)
                            vm.list = result.data.sqb;
                            vm.list1 = result.data.jqb;
                        },
                        error : function() {
                            alert("异常！");
                        }
                    });
                    // $.post(
                    //     "/island/stage/queryOneAllNews.do", {"categoryid": parseInt(categoryid)}, function (data) {
                    //     vm.items = data;
                    // });//end post
                },
                methods:{
                    putAnswer:function () {
                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            url: "/page/user/putAnswer" ,//url
                            data:$('#form1').serialize(),
                            success: function (result) {
                                console.log(result.msg);//打印服务端返回的数据(调试用)
                                alert("你的分数是"+result.msg);
                                vm.answer = result;
                            },
                            error : function() {
                                alert("异常！");
                            }
                        });
                    }
                }
            })
        });


    </script>
    <style type="text/css">
        body {background-color: #F5F5F5}
        .ex-bg {
            background: url("../../static/imgs/ex-bg1.jpg") no-repeat;
            background-size: 100%;
            width: 100%;

        }
        .ex-bg1 {
            background:url("../../static/imgs/ex-bg.png") no-repeat;
            width: 1350px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }
        .ex-bg p {
            width: 435px;
            height: 145px;
            position: absolute;
            top: 55px;
            left: 86px;
            font-size: 85px;
            margin-left: 30px;
            color: #ffffff;
        }
        .content {
            margin: 0 auto;
            width: 80%;
            background: #f9ffd7;
        }
        .checktest {
            width: 80%;
            margin: 0 auto;
        }
        .title{
            font-size: 30px;
            font-weight: bold;
            padding-top: 105px;

        }
        .sm-title {
            font-weight: bold;
            font-size: 25px;
        }
        .topic{
            margin-bottom: 60px;
        }
        .topic p{
            font-size: 20px;
            line-height: 50px;
        }
        .btn-div {
            text-align: center;
            padding-bottom: 80px;
        }
        .btn {
            width: 200px;
        }
    </style>
</head>
<body>
<div id="head" ></div>
<div class="container-fluid">
    <div class="ex-bg">
        <div style="height: 121px"></div>
        <div class="ex-bg1">
            <p>Java</p>
        </div>
    </div>

    <div class="content">
        <div class="checktest" id="subject">
            <form id="form1">
                <p class="title">一、选择题</p>
                <div  v-for="(index, value) in list" class="topic row">
                    <p class="sm-title">{{index+1}}、{{value.topic}}</p>
                    <p><label><input type="radio" name="{{value.id}}" value="A">&nbsp;A、{{value.answer1}}</label></p>
                    <p><label><input type="radio" name="{{value.id}}" value="B">&nbsp;B、{{value.answer2}}</label></p>
                    <p><label><input type="radio" name="{{value.id}}" value="C">&nbsp;C、{{value.answer3}}</label></p>
                    <p><label><input type="radio" name="{{value.id}}" value="D">&nbsp;D、{{value.answer4}}</label></p>
                </div>
                <p class="title">二、判断题</p>
                <div  v-for="(index, value) in list1" class="topic row">
                    <p class="sm-title">{{index+1}}、{{value.topic}}</p>
                    <p><label><input type="radio" name="{{'j_'+value.id}}" value="true">&nbsp;√</label></p>
                    <p><label><input type="radio" name="{{'j_'+value.id}}" value="false">&nbsp;×</label></p>
                </div>
            </form>
            <div class="btn-div">
                <button type="button" v-on:click="putAnswer()" class="btn btn-primary btn-lg login-button">交卷</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>